<template>
  <div id="useStamps">
    <!-- <el-tabs
      class="tab"
      v-model="activeName"
      type="border-card"
      @tab-click="handleTabClick"
    >
      <el-tab-pane label="待审批" name="0">
      </el-tab-pane>
      <el-tab-pane label="审批中" name="1">
      </el-tab-pane>
      <el-tab-pane label="审批通过" name="2">
      </el-tab-pane>
    </el-tabs> -->
    <div class="content-wrapper">
      <div class="actions" style="padding-bottom: 10px">
        <div class="left">
          <div>
            <el-button
              @click="newlyIncreasedadd(0)"
              type="primary"
              plain
              v-if="activeName == 0"
              >新增</el-button
            >
            <el-button
              @click="newlyDelete"
              type="primary"
              plain
              v-if="activeName == 0"
              >删除</el-button
            >
            <el-button
              @click="founddata(1)"
              type="primary"
              plain
              v-if="activeName == 0"
              >发起审批</el-button
            >
            <el-button
              @click="exportDerive()"
              plain
              type="primary"
              data-tracker="P49-4"
              v-permission="'finance_customer_delete'"
              >导出</el-button
            >
          </div>
          <div></div>
        </div>
        <div class="right" style="display: flex">
          <el-button
            type="primary"
            size="mini"
            @click="resultClickFn"
            style="height: 28px; margin: 0px 10px 0px 0px"
            >重置
          </el-button>
          <SettinUp
            :settype="headerId"
            :objSettinUpdata="objSettinUp"
            :key="activeName"
          ></SettinUp>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table" v-if="header_data_list.length > 0" :key="activeName">
        <TableHeader
          ref="TableHeaderList"
          :header_data_list="header_data_list"
          :HeaderData="HeaderData"
          :propMap="propMap"
          :redact="''"
          :particulars="''"
          :objheader="objheader"
          @orderIdNumsEvent="handleDeleteType"
          :operation_type="3"
        >
          <template #operation="{ scope }">
            <el-button
              @click="newlyIncreased(2, scope.row)"
              type="text"
              size="small"
              >查看</el-button
            >
            <el-button
              v-if="activeName === '0'"
              type="text"
              size="small"
              @click="newlyIncreased(1, scope.row)"
              >编辑</el-button
            >
          </template>
        </TableHeader>
      </div>
      <div class="actions" style="padding: 10px 0; width: 100%">
        <div class="left"></div>
        <div class="right">
          <el-pagination
            small
            background
            :current-page="paginations.pageIndex"
            :page-sizes="paginations.pageSizes"
            :page-size="paginations.pageSize"
            :layout="paginations.layout"
            :total="paginations.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  reqUseStampsList,
  reqUseStampsDelete,
  reqUseStampsSend,
  reqUseStampsCancel,
  reqUseStampsExportList,
} from "@/api/finance";
import { timestamp10 } from "@/utils/mUtils"; // 时间转化
import TableHeader from "@/page/orderform/components/TableHeader/tableheader.vue";
import SettinUp from "@/page/orderform/components/settingUp/settingUp.vue";
export default {
  name: "useStamps",
  components: { TableHeader, SettinUp },
  data() {
    return {
      labelPosition: "left",
      id_list: [],
      activeName: "0", //状态
      query: {
        status_list: [], //状态
        apply_no: "", //申请单号
        create_time: {
          start_time: "",
          end_time: "",
        }, //开始时间结束时间
        creation_time: [], //时间
        page: 1, //第几页
        page_size: 10, //一页几条
      },
      alltotal: 0,
      tableData: [],
      status_data: [
        {
          value: "0",
          label: "待审批",
        },
        {
          value: "1",
          label: "审批中",
        },
        {
          value: "2",
          label: "审批通过",
        },
        {
          value: "3",
          label: "已处理",
        },
        {
          value: "4",
          label: "已拒绝",
        },
      ],
      currentPage4: 1,
      paginations: {
        pageIndex: 1, // 当前位于哪页
        pageSize: 20, // 1页显示多少条
        pageSizes: [10, 20, 50, 100], //每页显示多少条
        total: 200,
        layout: "total, sizes, prev, pager, next, jumper", // 翻页属性
      },
      searchParams: {},
      header_data_list: [],
      propMap: {},
      obj_list: {},
      HeaderData: [],
      waybillIdNums: [],
      operation_type: 0,
      dynParams: {},
    };
  },
  filters: {
    statuData(value) {
      // console.log(value, "rerwer");
      if (value == 0) {
        return "待审批";
      } else if (value == 1) {
        return "审批中";
      } else if (value == 2) {
        return "审批通过";
      } else if (value == 3) {
        return "已处理";
      } else if (value == 4) {
        return "已拒绝";
      }
    },
  },
  computed: {
    headerId() {
      return "59";
    },
  },
  mounted() {
    // if (this.$route.query.Typedata != undefined) {
    //   this.activeName = this.$route.query.Typedata + "";
    //   this.handleClick();
    // } else {
    //   this.activeName = "0";
    //   this.handleClick();
    // }
  },
  watch: {
    $route: {
      handler(newV, oldV) {
        if (this.$route.query.Typedata == 0) {
          this.activeName = "0";
          this.handleClick();
        } else if (this.$route.query.Typedata == 1) {
          this.activeName = "1";
          this.handleClick();
        } else if (this.$route.query.Typedata == 2) {
          this.activeName = "2";
          this.handleClick();
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    handleTabClick() {
      this.paginations.pageIndex = 1;
      this.handleClick();
    },
    // 切换
    handleClick() {
      // 调用
      if (this.activeName == 0) {
        this.$router.push(
          { name: "useStamps", query: { Typedata: this.activeName } },
          () => {},
          () => {}
        );
        Object.assign(this.$data.query, this.$options.data().query);
        this.PettyList();
      } else if (this.activeName == 1) {
        this.$router.push(
          { name: "useStamps", query: { Typedata: this.activeName } },
          () => {},
          () => {}
        );
        Object.assign(this.$data.query, this.$options.data().query);
        this.PettyList();
      } else if (this.activeName == 2) {
        this.$router.push(
          { name: "useStamps", query: { Typedata: this.activeName } },
          () => {},
          () => {}
        );
        Object.assign(this.$data.query, this.$options.data().query);
        this.PettyList();
      }
    },
    resultClickFn() {
      this.paginations.pageIndex = 1;
      this.paginations.pageSize = 20;
      this.$refs.TableHeaderList.childMethod();
    },
    objSettinUp() {
      this.PettyList();
    },
    // 合同用章列表接口
    PettyList(setHeader = true) {
      var param = {
        ...this.query,
        status_list: this.settingStatus(),
        create_time: {
          start_time:
            this.query.creation_time.length == 0
              ? ""
              : timestamp10(this.query.creation_time[0]),
          end_time:
            this.query.creation_time.length == 0
              ? ""
              : timestamp10(this.query.creation_time[1]),
        },
        page: this.paginations.pageIndex,
        page_size: this.paginations.pageSize,
        ...this.searchParams,
        header_id: this.headerId + "",
      };
      this.dynParams = param;
      reqUseStampsList(param).then((res) => {
        if (res.code == 10000) {
          this.tableData = res.data.data;
          this.paginations.total = res.data.pagination.total;
          this.tableData.unshift({});
          this.header_data_list = this.tableData;
          if (setHeader) {
            this.HeaderData = res.data.item_list;
            this.Fntransformation(this.HeaderData);
          }
        }
      });
    },
    objheader(obj) {
      this.paginations.pageIndex = 1;
      this.searchParams = obj;
      this.PettyList(false);
    },
    Fntransformation(obj) {
      const result = {};
      for (const prop in obj) {
        if (obj.hasOwnProperty(prop)) {
          if (obj[prop].send_name !== "") {
            result[obj[prop].name] = obj[prop].show_name;
          } else {
            result[obj[prop].name] = obj[prop].name;
          }
        }
      }
      this.propMap = result;
    },
    handleSizeChange(val) {
      this.paginations.pageSize = val;
      this.PettyList();
    },
    handleCurrentChange(val) {
      this.paginations.pageIndex = val;
      this.PettyList();
      // console.log(`当前页: ${val}`);
    },
    newlyIncreasedadd() {
      this.$router.push({
        name: "useStampsAdd",
        query: { Type: "0", TageType: this.activeName },
      });
    },
    handleDeleteType(ids, val) {
      this.handleSelectionChange(val);
    },
    handleSelectionChange(value) {
      this.id_list = value.map((item) => item.id);
    },
    newlyDelete() {
      // console.log(this.id_list, "multiple");
      if (this.id_list.length == 1) {
        var param = {
          id: this.id_list[0] + "",
        };
        reqUseStampsDelete(param).then((res) => {
          if (res.code == "10000") {
            this.open1("删除成功", "success");
            this.handleClick();
          }
        });
      } else {
        this.open1("创建失败", "warning");
      }
    },
    newlyIncreased(type, val) {
      // type 这个是 判断是 查看还是编辑 id 当行传递的 id Tage 表示的是类型  TageType 3 是审核记录管理

      this.$router.push({
        name: "useStampsAdd",
        query: { Type: type, id: val.id, TageType: this.activeName },
      });
    },
    open1(value, type) {
      this.$message({
        message: value,
        type: type,
      });
    },
    // 审核
    founddata() {
      if (this.id_list.length == 1) {
        var param = {
          id: this.id_list[0] + "",
        };
        reqUseStampsSend(param).then((res) => {
          if (res.code == "10000") {
            this.open1("审核成功", "success");
            this.handleClick();
          }
        });
      } else {
        this.open1("请选择一条数据", "warning");
      }
    },
    // 取消审核
    withdraw() {
      if (this.id_list.length == 1) {
        var param = {
          id: this.id_list[0] + "",
        };
        reqUseStampsCancel(param).then((res) => {
          if (res.code == "10000") {
            this.open1("取消审核成功", "success");
            this.handleClick();
          }
        });
      } else {
        this.open1("请选择一条数据", "warning");
      }
    },
    // 查询
    queryData() {
      this.PettyList();
    },
    // 重置
    replacement() {
      Object.assign(this.$data.query, this.$options.data().query);
      this.handleClick();
    },
    exportDerive() {
      var params = {
        ...this.query,
        status_list: this.settingStatus(),
        create_time: {
          start_time:
            this.query.creation_time.length == 0
              ? ""
              : timestamp10(this.query.creation_time[0]),
          end_time:
            this.query.creation_time.length == 0
              ? ""
              : timestamp10(this.query.creation_time[1]),
        },
        ...this.searchParams,
        header_id: this.headerId + "",
        ids: this.id_list.map((item) => item * 1),
      };
      reqUseStampsExportList(params).then((res) => {
        this.reqUrl = "https://" + res.data.loaded_url;
        window.open(this.reqUrl);
      });
    },
    settingStatus() {
      // 0,4 是待审批的
      var invoice_status = [];
      if (this.activeName * 1 == 2) {
        invoice_status = [2, 3];
      } else if (this.activeName * 1 == 0) {
        invoice_status = [0, 4];
      } else {
        invoice_status = [this.activeName * 1];
      }
      return invoice_status;
    },
  },
};
</script>
<style scoped lang="less">
// /deep/ .el-tabs__nav-wrap {
//   left: -154px;
// }

::v-deep .el-tabs--border-card {
  -webkit-box-shadow: none;
  box-shadow: none;
}

/deep/ .header_table .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 10px;
}

#useStamps {
  background-color: #fff;
  padding: 10px 15px;
}

.reserveseek {
  width: 100%;
}

.reserveseek_page {
  display: flex;
  justify-content: flex-end;
  padding: 10px;
}

.reserveseek_button {
  margin-bottom: 10px;
}

.actions {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  background-color: #fff;

  .el-button + .el-dropdown,
  .el-dropdown + .el-button {
    margin-left: 10px;
  }
}

.content-wrapper {
  // padding: 15px;
}

.tab.el-tabs--border-card {
  border: none;
  box-shadow: none;

  .el-tabs__content {
    padding: 0;
    height: 40px;
  }
}

/deep/.tab.el-tabs--border-card > .el-tabs__content {
  padding: 0px;
}
</style>